CSS for Mobile Browsers : Common Patterns (part 3) - Titles and Pseudoclasses

12/14/2010 4:08:01 PM

3. Titles

A common approach for low- and mid-end devices is to rely on header tags and CSS to provide a simple solution for title design. The best approach is to define a 100% width, a background color (or image pattern), a top and bottom border, and the padding:

h1 {
   width: 90%;
   text-align: center;
   background-color: red;
   color: white;
   border-top: 6px solid #500;
   border-bottom: 6px solid #500;
   padding: 8px 20px;
   clear: both;
   font-size: larger;
}

In Figure 2 , we can see a very simple stylesheet applying some styles to titles without image usage.

Figure 2. With simple CSS we can create nice designs without images (and network latency). We can do more for smartphones, though, as we’ll see in later chapters.

4. Pseudoclasses

The pseudoclasses link, active, focus, and visited are compatible with all XHTML browsers and standards. The question is: when do the pseudoclasses work? Some situations are well known: for example, link is used for not-visited hyperlinks and visited is used if the links are in the previous browsing history.

What about the focus and active pseudoclasses, though? The behavior can vary in browsers with focus-based, cursor-based, and touch-based navigation.

The well-known hover pseudoclass is not available in the WAP CSS standard, but it is compatible with most non-touch devices, assuming a similar behavior to focus. In touch devices, there isn’t a mouseover event; the screen doesn’t detect the finger position until the user taps it (or clicks it).

Some mobile UIs for touch devices implement a two-tap pattern; if we tap once over an element, it will be like a hover effect, and if we tap again, it will be a click. This can be done with JavaScript and event handling.

Warning:

Remember that even if a browser supports a given pseudoclass, it may not work in touch navigation mode.

Table 3 shows the compatibility for pseudoclasses.

Table 3. CSS pseudoclasses compatibility table
Browser/platform	link	visited	focus	active	hover
Safari	Yes	Yes	Partial	Yes	No
Android browser	Yes	No	No	No	Yes (using keys)
Symbian/S60	Yes	No	No	No	Yes
Nokia Series 40	Yes	Yes	No	No	Yes from 6^th edition No before 6^th edition
webOS	Yes	No	No	No	No
BlackBerry	Yes	No	No	No	No
NetFront	No	No	No	Yes	No
Openwave (Myriad)	As visited	No	No	No	No
Internet Explorer	Yes	Yes	Yes	Yes	No
Motorola Internet Browser	Yes	Yes	No	Yes	No
Opera Mobile	Yes	Yes	No	No	Yes
Opera Mini	Yes	Yes	No	No	Yes